<template>
  <b-container style="padding: 0" fluid>
    <!-- 路由刷新组件 -->

    <!-- 动态相关 -->
    <b-row class="navCard" @click="setEditorCardVisible(false)">
      <b-list-group style="padding: 0">
        <b-list-group-item
          @click="setDyid(1)"
          active-class="active"
          to="/mainPage/mainDynamic"
        >
          时间线
        </b-list-group-item>
        <b-list-group-item
          @click="setDyid(2)"
          active-class="active"
          to="/mainPage/myDynamic"
        >
          我的动态
        </b-list-group-item>
        <b-list-group-item
          @click="setDyid(3)"
          active-class="active"
          to="/mainPage/myFollow"
        >
          我的关注
        </b-list-group-item>
        <b-list-group-item active-class="active" to="/mainPage/myCircle">
          我的圈子
        </b-list-group-item>
        <b-list-group-item
          active-class="active"
          to="/mainPage/theRankingListOfUser"
        >
          排行榜
        </b-list-group-item>
      </b-list-group>
    </b-row>
    <pre class="mt-3 mb-0" />

    <!-- 社交相关 -->
    <b-row class="navCard" @click="setEditorCardVisible(true)">
      <b-list-group style="padding: 0">
        <b-list-group-item active-class="active" to="/mainPage/theMessage">
          消息
          <b-badge style="color: black; font-size: 100%">9</b-badge>
        </b-list-group-item>
        <b-list-group-item active-class="active" to="/mainPage/privateMessage">
          私信
        </b-list-group-item>
        <b-list-group-item
          active-class="active"
          to="/mainPage/friendManagement"
        >
          好友管理
        </b-list-group-item>
        <b-list-group-item
          active-class="active"
          to="/mainPage/dynamicManagement"
        >
          动态管理
        </b-list-group-item>
      </b-list-group>
    </b-row>
    <pre class="mt-2 mb-0" />

    <!-- 回到顶部 -->
    <b-row style="max-width: 100%; margin: 0">
      <b-col style="text-align: center; padding: 0">
        <div class="toolCube">
          <b-list-group-item @click="toTop" href="#">
            <transition enter-active-class="animated rubberBand">
              <b-icon
                v-show="toTopShow"
                style="animation-duration: 1000ms"
                icon="arrow-up"
              />
            </transition>
          </b-list-group-item>
        </div>
      </b-col>
      <!-- 刷新 -->
      <b-col style="text-align: center; padding: 0">
        <div class="toolCube2">
          <b-list-group-item @click="reload" href="#">
            <transition enter-active-class="animated rotateIn">
              <b-icon
                v-show="falshShow"
                style="animation-duration: 1000ms"
                icon="arrow-clockwise"
              />
            </transition>
          </b-list-group-item>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: "MyNavList",
  data() {
    return {
      //图标动画的布尔
      falshShow: true,
      toTopShow: true,
    };
  },
  methods: {
    //刷新组件
    reload() {
      this.$store.commit("reflash", false);
      this.revolve();
      this.$nextTick(() => {
        this.$store.commit("reflash", true);
      });
    },
    //旋转刷新按钮动画执行
    revolve() {
      this.falshShow = false;
      this.$nextTick(() => {
        this.falshShow = true;
      });
    },
    //回到顶部动画执行
    toTop() {
      //console.log("我进来了");
      this.toTopShow = false;
      this.$nextTick(() => {
        this.toTopShow = true;
      });
      document.documentElement.scrollTop = 0;
    },
    //点击社交系统不显示编辑框
    setEditorCardVisible(res) {
      this.$store.commit("setEditorCardVisible", res);
    },
    //设置点了那个模块
    setDyid(id) {
      this.$store.commit("setDynamicId", id);
      this.reload();
    },
  },
};
</script>

<style scoped>
.navCard {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 0;
  max-width: 100%;
  margin: 0;
}
.toolCube {
  border-radius: 10px;
  height: 100%;
  width: 90%;
}
.toolCube2 {
  border-radius: 10px;
  height: 100%;
  width: 90%;
  margin-left: 10%;
}
</style>